import { createPortal } from "react-dom";
import { IMember } from "./RTC/IMember";
import styles from './style.module.less';

export interface ICameraViewProps extends React.VideoHTMLAttributes<HTMLElement> {
  _ref?: React.LegacyRef<HTMLDivElement>,
  member: IMember,
  container?: HTMLDivElement | null;
}

export function CameraView(props: ICameraViewProps) {
  const { _ref, member, container, ..._p } = props;
  if (!container) return null;
  return createPortal(
    <div className={styles.cam_view} ref={_ref} {..._p}>
      <video autoPlay={true} muted={true} controls={false} disablePictureInPicture disableRemotePlayback/>
      <div className={styles.name}>{member.username}</div>
    </div>,
    container
  )
}